<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>贝塞尔在线编辑</title>
    <link rel="stylesheet" href="BezierCurve.css">
    <script src="../../jquery/jquery-1.10.2.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<style>
    body {
        display: flex;
        align-items: flex-start;
        height: 100vh;
        justify-content: center;
        font-size: 14px;
        color: #555;
        padding: 0px 20px;
        padding-top: 100px;
        overflow-y: auto;
        margin: 0;
    }
</style>

<body>
    <main id='main'>
        <div class="ball-container" style='display: flex;justify-content: center;'>
            <div class="ball-move-bg"></div>
            <div class="ball"></div>
            <div class="ball-shadow" v-show='showTrack'></div>
        </div>
        <div style='margin-bottom:20px;display: flex;justify-content: center;align-items: center;'>
            <button @click='drawAnimation()'>绘制</button>
            <label for="show-track" style="margin:0px 5px">
                显示轨迹<input type="checkbox" id='show-track' v-model.number='showTrack'>
            </label>
        </div>

        <div id='curve-container'>
            <div style='position: relative;' v-for='(obj,index) in dotsSet' v-if='obj.show == true'>
                <button v-show=' curveEditorNumber == (index + 1)' class='circle-button close-button'
                    style='font-size:16px;' @click='dotsSet[index].show = false'>
                    ×
                </button>
                <bezier-viewer :dots='obj.dots' :title='obj.title' :options='obj.options ? obj.options : {}'>
                </bezier-viewer>
            </div>

            <button v-show='curveEditorNumber < dotsSet.length ' id='add-btn' @click='addCurveEditor()'>+</button>
        </div>

    </main>

</body>

<script type="text/x-template" id='bezier-curve-template'>

    <div  class='curve-editor' style='z-index:1;margin:0px 10px;'>
        <svg :width=' 720 + "px" ' :height=' 800 + "px" ' :viewBox=" '50 200 ' + 720 + ' ' + 800 ">
            <text x='6px' y='20px'>{{title}}</text>
            <!-- 连接起点终点的path -->
            <path stroke='#0075ff' stroke-opacity='0.5' :d="startEndPath" stroke-dasharray='5' stroke-dashoffset='5' ></path>
            <!-- 连接dots的path -->
            <path class='dot-path' :d="linePath" ></path>
            <path class='curve-path' :d="curvePath"></path>
            <g :transform="new Matrix(1,0,0,1,startX,startY).toString()">
                <!-- 箭头指示 -->
                <polygon fill='#0075ff' points='0 5,0 -5,15 0' :transform='angleRotateMatrix'></polygon>
                <circle  r='5'  class='dot-circle index-circle'  style='fill:red'></circle>
                <text  x='5px' y='10px'>[{{startX + ',' + startY}}]</text>
            </g>
            <g :transform="new Matrix(1,0,0,1,endX,endY).toString()" >
                <circle  r='5'  class='dot-circle index-circle'  style='fill:red'></circle>
                <text  x='5px' y='10px'>[{{endX + ',' + endY}}]</text>
            </g>

            <g  v-for='(dot,index) in dots' :transform="new Matrix(1,0,0,1,dot.x,dot.y).toString()" :data-index="index"  class='dot-g'>
                <circle r='5' class='dot-circle' style='fill:gray'></circle>
                <path class='dot-line'></path>
                <text  x='5px' y='10px'>[{{dot.x + ',' + dot.y}}]</text>
            </g>

            <g  v-for='(dot,index) in plans' :transform="new Matrix(1,0,0,1,dot.x,dot.y).toString()" :data-index="index"  class='dot-g'>
                <circle r='5' class='dot-circle index-circle' style='fill:blue'></circle>
                <text x='5px' y='10px'>[{{dot.x + ',' + dot.y}}]</text>
            </g>
        </svg>
        <div style='display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;padding:10px'>
            <button @click='addDot()' style='width:70%'>添加一个控制点</button>
            <ul style='width:100%;cursor:default'>
                <li>
                    起点 : 
                    <input type="number" v-model.number='startX'> 
                    , 
                    <input type="number" v-model.number='startY'>
                </li>
                <li>
                    终点 : 
                    <input type="number" v-model.number='endX' > 
                    , 
                    <input type="number" v-model.number='endY' >
                </li>
                <li v-for='(dot,index) in dots'>
                    {{index}} : 
                    <input type="number" v-model.number.number='dot.x'> 
                    <input type="number" v-model.number.number='dot.y'>
                     <!-- {{dot.x}} , {{dot.y}} -->
                    <button @click='deleteDot(index)'>×</button>
                </li>
            </ul>
        </div>
    </div>
    
</script>

<script src="common.js"></script>
<script src="BezierCurve.js"></script>

<script>
    (function () {
        initPint();
    })();
</script>

</html>